import { StyleValue, defineComponent } from "vue";
import { labelProps } from "./types";
export default defineComponent({
  name: "label-view",
  props: labelProps,
  setup(props) {
    const getStyle = (): StyleValue => {
      const obj: Record<typeof props.type, any> = {
        blue: {
          color: "#007FFF",
          backgroundColor: "rgba(0, 127, 255, 0.2)",
          width: "auto",
          padding: "0px 8px",
        },
        yellow: {
          color: "rgba(255, 111, 0, 1)",
          backgroundColor: "rgba(255, 111, 0, 0.2)",
          width: "auto",
          padding: "0px 8px",
        },
        green: {
          color: "rgba(15, 123, 33, 1)",
          backgroundColor: "rgba(186, 232, 174, 0.38)",
          width: "auto",
          padding: "0px 8px",
        },
        tag: {
          color: "rgba(38, 101, 250, 1)",
          backgroundColor: "rgba(38, 101, 250, 0.05)",
          width: "auto",
          padding: "0px 8px",
          border: "1px solid #2665FA",
        },
        tagOrange: {
          color: "rgba(254, 137, 35, 1)",
          backgroundColor: "rgba(252, 228, 208, 0.18)",
          width: "auto",
          padding: "0px 8px",
          border: "1px solid #FE8923",
        },
      };
      return obj[props.type] as StyleValue;
    };
    return () => {
      return (
        <div
          style={getStyle()}
          class={
            "flex items-center justify-center h-[19px] w-[42px] text-[11px] rounded-[10px] whitespace-nowrap"
          }
        >
          {props.name}
        </div>
      );
    };
  },
});
